﻿@{
    Layout = "_share/_Layout-nonav.cshtml";
    ViewBag.Title = "钻孔轨迹";
}
<div style="text-align:center;"><span>钻孔编号：</span><span id="holeIds" style="width:60%"></span><button id="btnShow" class="btn btn-primary">展示</button></div>
<div id="container" class="col-md-12" style="height: 100% ; margin: 0; padding: 0; overflow: hidden; ">
    <div id="chartContainer" style=" width: 20%; height: 100%; position: absolute; display: none;">
        <div id="yzChart" class="row" style="height: 33%"></div>
        <div id="xyChart" class="row" style="height: 34%"></div>
        <div id="xzChart" class="row" style="height: 33%"></div>
    </div>
    <div id="dataContainer" style=" width: 300px; height: auto; position: absolute; display: none; right: 0px; top: 20px; overflow: auto"></div>
</div>

<div id="tips" style="width: 240px; height: auto; position: absolute; z-index: 999999; display: none; color: #ffffff;">
    序号:017<br />坐标：70.00,77.13,50.00<br />时间：2014/5/13 10:35:03<br />孔深：0.00
</div>
@section css
{
    <link href="Content/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="Content/css/tracking3d.css" rel="stylesheet" />
    <link href="Content/css/dataTables.fixedHeader.min.css" rel="stylesheet" />
    <link href="Content/css/dataTables.scroller.min.css" rel="stylesheet" />
    <link href="Content/css/select2.css" rel="stylesheet" />
}
@section script
{
    <script src="Scripts/libs/jquery.mousewheel.js"></script>
    <script src="Scripts/libs/Three.js"></script>
    <script src="Scripts/libs/RequestAnimationFrame.js"></script>
    <script src="Scripts/libs/stats.min.js"></script>
    <script src="Scripts/libs/jsUtils.js"></script>
    <script src="Scripts/libs/dat.gui.min.js"></script>
    <script src="Scripts/libs/canvasjs.min.js"></script>
    <script src="Scripts/libs/jquery.dataTables.min.js"></script>
    <script src="Scripts/libs/dataTables.fixedHeader.min.js"></script>
    <script src="Scripts/libs/select2.js"></script>
    <script src="Scripts/libs/bootstrap.min.js"></script>
    <script src="Scripts/controls/TrackballControls.js"></script>
    <script src="Scripts/controls/FirstPersonControls.js"></script>
    <script src="Scripts/controls/OrbitControls.js"></script>
    <script src="Scripts/sim/sim.js"></script>
    <script src="Scripts/three-helper.js"></script>
    <script src="Content/fonts/optimer_regular.typeface.js"></script>
    
<script src="Scripts/trajectory/tracking3d.js"></script>
<script src="Scripts/trajectory/axis.js"></script>
<script src="Scripts/trajectory/tracking.js"></script>
<script src="Scripts/trajectory/plane.js"></script>
<script src="Scripts/trajectory/pointSphere.js"></script>
<script src="Scripts/trajectory/xyView.js"></script>
<script src="Scripts/trajectory/xzView.js"></script>
<script src="Scripts/trajectory/yzView.js"></script>
    
    <script>
        
      

        $(function () {
            
            var container = $("#container")[0];
            var app = new Tracking3DApp();
            app.init({
                container: container,
            });
            app.run();
            
            var pageSize = 1; //查找5天的数据。
            $("#holeIds").select2({
                placeholder: "请选择最多5个钻孔编号",
                maximumInputLength: 10,
                maximumSelectionSize: 5,
                multiple: true,
                ajax: {
                    dataType: 'jsonp',
                    quietMillis: 50,
                    //The url of the json service
                    url: "/GetHoleJiaoduIds",
                    //Our search term and what page we are on
                    data: function (term, page) {
                        return {
                            pageSize: pageSize,
                            pageNum: page,
                            searchTerm: term
                        };
                    },
                    results: function (data, page) {
                        var select2Results = [];
                        //                    var d = $.parseJSON(data);
                        var d = data;
                        var more = (page * pageSize) < d.total;
                        for (var i = 0; i < d.results.length; i++) {
                            var item = d.results[i];
                            var group = select2Results[item.Group];
                            if (!group) {
                                group = { text: item.group, children: [] };
                            }
                            for (var j = 0; j < item.options.length; j++) {
                                var option = item.options[j];
                                group.children.push({ id: option.id, text: option.text });
                            }

                            select2Results.push(group);
                        }

                        return {
                            results: select2Results, more: more
                        };
                    }
                },
                dropdownCssClass: "bigdrop",
                escapeMarkup: function (m) { return m; }
            });
            
            $("#btnShow").click(function () {
                var list = $("#holeIds").select2("val");
                if (!list && list.length == 0) return;

                $.getJSON("/GetHoleJiaoduData", { holeId: list }, function (result) {
                    app.show(result);
                }).error(function (jqXHR, textStatus, errorThrown) {
                    console.log("error " + textStatus);
                    console.log("incoming Text " + jqXHR.responseText);
                });
            });

            $("#btnRefresh").click(function () {
                window.location.reload();
                localStorage.clear();
            });

        });
    </script>

}